<template>
  <el-row :gutter="16">
    <el-col span="8">
      <el-card>
        <div class="card-header">当前BMI指数</div>
        <div class="card-value">{{ currentBMI || '--' }}</div>
        <el-tag :color="bmiTagColor" class="mt-2">{{ bmiStatus }}</el-tag>
        <div class="card-desc mt-2">
          {{ bmiChange > 0 ? `较上周下降了${bmiChange}` : bmiChange < 0 ? `较上周上升了${Math.abs(bmiChange)}` : '与上周持平' }}，继续保持！
        </div>
      </el-card>
    </el-col>
    <el-col span="8">
      <el-card>
        <div class="card-header">本周锻炼目标</div>
        <div class="card-value">86%</div>
        <el-progress percent="86" stroke-width="6" class="mt-2" />
        <div class="card-desc mt-2">5/7天</div>
      </el-card>
    </el-col>
    <el-col span="8">
      <el-card>
        <div class="card-header">今日步数</div>
        <div class="card-value">7,532</div>
        <el-tag color="info" class="mt-2">进行中</el-tag>
        <div class="card-desc mt-2">距离目标10,000步还有2,468步</div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import request from '@/utils/request';
import dayjs from 'dayjs';

export default {
  name: 'DataCards',
  data() {
    return {
      currentBMI: 0, // 当前BMI
      bmiChange: 0, // 与上周差值
      bmiStatus: '', // BMI状态（正常/过重/肥胖）
      bmiTagColor: '', // 标签颜色
      userHeight: 1.75 // 用户身高（后续可从个人资料接口获取）
    };
  },
  mounted() {
    this.getBMI数据(); // 加载时获取后端数据
  },
  methods: {
    // 从后端获取最新体重，计算BMI
    async getBMI数据() {
      try {
        // 1. 获取最新一条体重记录
        const latestRes = await request({
          url: '/weighthis/list',
          method: 'POST',
          data: { pageNum: 1, pageSize: 1, orderBy: 'recordDate desc' }
        });
        const latestWeight = latestRes.records[0]?.weight || 0;
        this.currentBMI = (latestWeight / (this.userHeight * this.userHeight)).toFixed(1);

        // 2. 判断BMI状态
        if (this.currentBMI < 18.5) {
          this.bmiStatus = '偏瘦';
          this.bmiTagColor = 'info';
        } else if (this.currentBMI < 24) {
          this.bmiStatus = '正常';
          this.bmiTagColor = 'success';
        } else if (this.currentBMI < 28) {
          this.bmiStatus = '过重';
          this.bmiTagColor = 'warning';
        } else {
          this.bmiStatus = '肥胖';
          this.bmiTagColor = 'danger';
        }

        // 3. 获取上周同期体重，计算差值
        const lastWeekDate = dayjs().subtract(7, 'day').format('YYYY-MM-DD');
        const lastWeekRes = await request({
          url: '/weighthis/list',
          method: 'POST',
          data: { pageNum: 1, pageSize: 1, startDate: lastWeekDate, endDate: lastWeekDate }
        });
        const lastWeekWeight = lastWeekRes.records[0]?.weight || 0;
        const lastWeekBMI = (lastWeekWeight / (this.userHeight * this.userHeight)).toFixed(1);
        this.bmiChange = (lastWeekBMI - this.currentBMI).toFixed(1);
      } catch (error) {
        console.error('获取BMI数据失败', error);
      }
    }
  }
};
</script>

<style lang="less" scoped>
/* 原有样式不变 */
.card-header {
  color: #8392a5;
  font-size: 14px;
}

.card-value {
  font-size: 28px;
  font-weight: 600;
  margin: 10px 0;
  color: #1f2d3d;
}

.card-desc {
  font-size: 12px;
  color: #8392a5;
}
</style>